<template>
  <div class="personal-carded">
    <a-row class="mb24">
      <a-col :span="20">
        <a-row>
          <a-col class="card-title">{{ props.title }}</a-col>
          <a-col class="card-note">{{ props.note }}</a-col>
        </a-row>
        <a-row>
          <a-col class="card-desc">{{ props.desc }}</a-col>
        </a-row>
      </a-col>
      <a-col v-if="props.fun" :span="4" class="card-button">
        <a-button v-if="auth" v-auth="auth" @click="cardBtn">修改</a-button>
        <a-button v-else @click="cardBtn">修改</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue'
  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    fun: {
      type: Boolean,
      default: false
    },
    note: {
      type: String,
      default: ''
    },
    auth: {
      type: String,
      default: ''
    }
  })
  const emits = defineEmits(['cardBtn'])
  const cardBtn = () => {
    emits('cardBtn')
  }

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .personal-carded {
    margin-bottom: 24px;
    width: 100%;

    .card-title {
      height: 22px;
      color: @text02;
      .font14b();
    }

    .card-note {
      padding: 0 10px;
      box-sizing: border-box;
      color: @text03;
      .font14b();

      word-break: break-all;
    }

    .card-desc {
      margin-top: 4px;
      color: @text02;
      .font14();

      word-break: break-all;
    }

    .card-button {
      .fc();
    }
  }
</style>
